<template>
  <div class="p-2">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div class="mb-[10px]" v-show="showSearch">
        <el-card shadow="hover">
          <el-form ref="queryFormRef" :model="queryParams"   :inline="true" label-width="110px" label-suffix=":">
            <el-form-item label="创建时间" >
              <el-date-picker
                v-model="dateRange"
                style="width: 240px"
                value-format="YYYY-MM-DD"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
            <template v-if="isShrink">
            <el-form-item label="批次号" >
              <el-input  v-model="queryParams.billNo" placeholder="请输入批次号" clearable style="width: 240px"  />
            </el-form-item>
            <el-form-item label="商户名称" >
              <el-input   v-model="queryParams.params.mer_name" placeholder="请输入商户名称" clearable style="width: 240px"/>
            </el-form-item>
            <el-form-item label="孵化中心" >
              <el-input   v-model="queryParams.params.fhzx_channel_name" placeholder="请输入孵化中心名称" clearable style="width: 240px"/>
            </el-form-item>
            <el-form-item label="孵化中心编号" >
              <el-input   v-model="queryParams.params.fhzx_channel_no" placeholder="请输入孵化中心编号" clearable style="width: 240px"/>
            </el-form-item>
            <el-form-item label="总监" >
              <el-input   v-model="queryParams.params.zj_channel_name" placeholder="请输入总监名称" clearable style="width: 240px"/>
            </el-form-item>
            <el-form-item label="总监编号" >
              <el-input   v-model="queryParams.params.zj_channel_no" placeholder="请输入总监编号" clearable style="width: 240px"/>
            </el-form-item>
            <el-form-item label="业务员" >
              <el-input   v-model="queryParams.params.ywy_channel_name" placeholder="请输入业务员" clearable style="width: 240px"/>
            </el-form-item>
            <el-form-item label="业务员编号" >
              <el-input   v-model="queryParams.params.ywy_channel_no" placeholder="请输入业务员编号" clearable style="width: 240px"/>
            </el-form-item>
            <el-form-item label="分润状态">
              <el-select v-model="queryParams.channelHalveStatus"  placeholder="请选择分润状态" clearable style="width: 240px">
                <el-option v-for="dict in acc_status" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
            </template>
            <el-form-item>
              <el-button type="primary" @click="handleQuery" icon="Search"  >搜索</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
              <a class="my-link" @click="shrinkClick" v-if="isShrink">精简模式<el-icon><ArrowUp /></el-icon></a>
              <a class="my-link"  @click="shrinkClick" v-if="!isShrink">高级模式<el-icon><ArrowDown /></el-icon></a>
            </el-form-item>
          </el-form>
        </el-card>

      </div>
    </transition>



    <el-card shadow="hover">
      <el-table ref="roleTableRef"  v-loading="tableloading"  :data="operList" border>
        <el-table-column label="创建时间" align="center" prop="addTime"  width="180" >
          <template #default="scope">
            <span>{{ parseTime(scope.row.addTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="批次号" align="center"  prop="billNo" width="200" />
        <el-table-column label="订单号" align="center" prop="busNo" :show-overflow-tooltip="true" width="250" />
        <el-table-column label="企业名称" align="center" prop="merName" :show-overflow-tooltip="true" width="200" >
        </el-table-column>
        <el-table-column label="服务商名称" align="center"  prop="sydName" width="150" >

          </el-table-column>

        <!-- <el-table-column label="收益来源" align="center"  prop="unitNo" width="150" />-->
        <el-table-column label="计费模式" align="center"  prop="chargeMode" width="120" >
          <template #default="scope">
            <dict-tag :options="charge_mode" :value="scope.row.chargeMode" />
          </template>
        </el-table-column>
        <el-table-column label="交易金额(元)" align="center" prop="money" :show-overflow-tooltip="true" width="120" >
          <template #default="scope">
                <span>{{ convertFenToYuan(scope.row.money) }}</span>
              </template>
          </el-table-column>
        <el-table-column label="开票费率" align="center" prop="shServiceChargeRateStr" :show-overflow-tooltip="true" width="100" />
       <el-table-column label="孵化中心" align="center" prop="fhzxChannelName" :show-overflow-tooltip="true" width="160" />
       <el-table-column label="孵化中心费率" align="center" prop="fhzxServiceChargeRate" :show-overflow-tooltip="true" width="120" >
         <template #default="scope">
               <span>{{ getFl(scope.row.fhzxServiceChargeRate) }}</span>
         </template>
        </el-table-column>
       <el-table-column label="孵化中心收益(元)" align="center" prop="fhzxServiceChargeMoney" :show-overflow-tooltip="true" width="140" >
         <template #default="scope">
                 <span>{{ convertFenToYuan(scope.row.fhzxServiceChargeMoney) }}</span>
               </template>
         </el-table-column>
       <el-table-column label="总监" align="center" prop="zjChannelName" :show-overflow-tooltip="true" width="160" />
       <el-table-column label="总监费率" align="center" prop="zjServiceChargeRate" :show-overflow-tooltip="true" width="120" >
         <template #default="scope">
                <span>{{ getFl(scope.row.zjServiceChargeRate) }}</span>
          </template>
       </el-table-column>
       <el-table-column label="总监收益(元)" align="center" prop="zjServiceChargeMoney" :show-overflow-tooltip="true" width="140">
         <template #default="scope">
                 <span>{{ convertFenToYuan(scope.row.zjServiceChargeMoney) }}</span>
               </template>
         </el-table-column>
       <el-table-column label="业务员" align="center" prop="ywyChannelName" :show-overflow-tooltip="true" width="150" />
       <el-table-column label="业务员费率" align="center" prop="ywyServiceChargeRate" :show-overflow-tooltip="true" width="120" >
         <template #default="scope">
                  <span>{{ getFl(scope.row.ywyServiceChargeRate) }}</span>
            </template>
         </el-table-column>
       <el-table-column label="业务员收益(元)" align="center" prop="ywyServiceChargeMoney" :show-overflow-tooltip="true" width="140">
         <template #default="scope">
           <span>{{ convertFenToYuan(scope.row.ywyServiceChargeMoney) }}</span>
         </template>
       </el-table-column>
      </el-table>
      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>



  </div>

</template>

<script  setup name="balance" lang="ts">

import {billDetail} from "@/api/agent/balaDetail";
  const router = useRouter();
  const { proxy } = getCurrentInstance() as ComponentInternalInstance;
  const queryFormRef = ref<ElFormInstance>();
  const tableloading = ref(false)
  const operList = ref([])
  const total = ref(0)
  const {charge_mode} = toRefs<any>(proxy?.useDict('charge_mode'));
  const isShrink = ref(false)
  const queryParams = ref({
    params:{
      begin_date:"",
      end_date:"",
      channel_name:"",
      channel_no:"",
      dw_level:"",
      orderByColumn:""
    },
    status:"",
    payStatuStrs:'1,2,3',
    pageSize:10,
    pageNum:1
  });
  const showSearch = ref(true);
  const dateRange = ref(['', '']);
  const { agent_level } = toRefs<any>(proxy?.useDict('agent_level'));
  const { acc_status } = toRefs<any>(proxy?.useDict('acc_status'));

  const convertFenToYuan = (fen)=>{
    if(!fen){
      return '--';
    }
    return (fen / 100).toFixed(2);
  }

  /** 重置按钮操作 */
  const resetQuery = () => {
    dateRange.value = ['', '']
    queryFormRef.value?.resetFields();
    initDate();
    queryParams.value.pageNum = 1;
  }


  const shrinkClick = ()=>{
    if(isShrink.value){
      isShrink.value = false
    }else{
      isShrink.value = true
    }

  }

  const getFl =(fl)=>{
    if(fl){
      return fl+"%";
    }
    return '--';
  }

/**  查询 */
  const handleQuery = ()=>{
    queryParams.value.pageNum = 1;
    queryParams.value.params.begin_date = dateRange.value[0]
    queryParams.value.params.end_date = dateRange.value[1]
    getList();
  }


  const initDate = ()=>{

    // 获取当前日期
    let currentDate = new Date();
    // 创建一个新的Date对象，设置为当前月份的第一天
    let firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
    dateRange.value = [firstDayOfMonth.Format('yyyy-MM-dd'),currentDate.Format('yyyy-MM-dd')]
    queryParams.value.params.begin_date  = firstDayOfMonth.Format('yyyy-MM-dd');
    queryParams.value.params.end_date  = currentDate.Format('yyyy-MM-dd');
  }

 /**
  * 查询列表
  */
 const getList = () => {
   tableloading.value = true
   billDetail(queryParams.value).then(res => {
     operList.value = res.rows
     total.value = res.total
     tableloading.value = false
   })
 }


  onMounted(() => {
    initDate();
    getList();
  });

</script>

<style>


.my-link,.my-link:hover {
    /* 鼠标悬停时的样式 */
   color: #1890ff;
   text-decoration: none;
   background-color: transparent;
   outline: none;
   cursor: pointer;
   transition: color .3s;
   -webkit-text-decoration-skip: objects;
   padding-left:10px;
}

</style>
